<template>
  <div>
    <ul>
      <li @click="weiju">
          微句
      </li>
      <li @click="heart">
          心里话
      </li>
      <li @click="life">
          生活分享
      </li>
      <li @click="huaSelect">
          话题探索
      </li>
      <li @click="deselect" class="cancel">
          取消
      </li>
        <popup
          :show-mask="false"
          v-model="positionIsShow"
          position="right"
          style="width:100vw;"
          :popup-style="{zIndex:11}"
        >
          <position/>
        </popup>
         <popup
          :show-mask="false"
          v-model="heartIsShow"
          position="right"
          style="width:100vw;"
          :popup-style="{zIndex:10}"
        >
          <heart/>
        </popup>
         <popup
          :show-mask="false"
          v-model="lifeIsShow"
          position="right"
          style="width:100vw;"
          :popup-style="{zIndex:10}"
        >
          <life/>
        </popup>
         <popup
          :show-mask="false"
          v-model="huaSelectIsShow"
          position="right"
          style="width:100vw;"
          :popup-style="{zIndex:10}"
        >
          <huaSelect/>
        </popup>
    </ul>
  </div>
</template>
<script>
import { Popup, Swiper, SwiperItem } from "vux";
import position from "./position";
import heart from './heart'
import life from './life'
import huaSelect from './huaSelect'
export default {
    data:function() {
        return{
             positionIsShow: false,
             heartIsShow:false,
             lifeIsShow:false,
             huaSelectIsShow:false
        }
    },
    components:{
         Popup,
        Swiper,
        SwiperItem,
        position,
        heart,
        life,
        huaSelect
    },
    methods: {
        weiju:function() {
            this.positionIsShow = true
        },
        deselect:function() {
            this.$emit('cancelMessage')
        },
        heart:function() {
            this.heartIsShow = true
        },
         life:function() {
            this.lifeIsShow = true
        },
         huaSelect:function() {
            this.huaSelectIsShow = true
        },
    },
};
</script>

<style scoped>
ul{
    width: 100vw;
}
li{
    width: 100vw;
    height: 10vw;
    color: #09bb07;
    line-height: 10vw;
}
.cancel{
    color: gray;
}
</style>
